<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2663058" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon threeBlue">&#xe633;</span>
                <div class="name">默认模式</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe611;</span>
                <div class="name">默认模式1</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe62b;</span>
                <div class="name">默认模式</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe618;</span>
                <div class="name">ic_默认模式</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe642;</span>
                <div class="name">框选</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe659;</span>
                <div class="name">框选工具</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe60b;</span>
                <div class="name">旋转</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe60c;</span>
                <div class="name">绕构件旋转</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe60d;</span>
                <div class="name">默认模式</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe6cf;</span>
                <div class="name">1-默认模式</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe6e2;</span>
                <div class="name">KHCFDC_旋转</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe60e;</span>
                <div class="name">默认模式2</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe60f;</span>
                <div class="name">框选1</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe869;</span>
                <div class="name">流转,协作,循环,环形,协同,旋转</div>
                <div class="code-name">&amp;#xe869;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe735;</span>
                <div class="name">默认模式-13</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe610;</span>
                <div class="name">框选</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xeddc;</span>
                <div class="name">旋转</div>
                <div class="code-name">&amp;#xeddc;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe600;</span>
                <div class="name">shitudongbeishitu</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe601;</span>
                <div class="name">shituhoushitu</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe602;</span>
                <div class="name">shitudongnanshitu</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe603;</span>
                <div class="name">shitufushitu</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe604;</span>
                <div class="name">shitushiti</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe605;</span>
                <div class="name">shituyangshitu</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe606;</span>
                <div class="name">shituxinanshitu</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe607;</span>
                <div class="name">shituxibeishitu</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe608;</span>
                <div class="name">shituzhushitu</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe609;</span>
                <div class="name">shituzuoshitu</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe60a;</span>
                <div class="name">shituyoushitu</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe656;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe6cb;</span>
                <div class="name">中心</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe64c;</span>
                <div class="name">【视图】正交</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe64b;</span>
                <div class="name">【视图】三维视图</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe652;</span>
                <div class="name">【视图】视图方向</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe660;</span>
                <div class="name">【视图】追踪</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe629;</span>
                <div class="name">视图</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon threeBlue">&#xe6cc;</span>
                <div class="name">【视图】线框</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'threeBlue';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABM0AAwAAAAAKBgAABLgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIoNaIy4GYACBPArAVK8lATYCJAOCbguBPgAEIAWCBAcgG9Qdo5A+klbSyf6qwDaWBX5gO087njUlDIP7sLDC/V6On5R8r29MXNmZhwbpxtbx2KGUP/Db7H3AQNGJGNiogFMwAccHVATM+FjMqhXqKtBpr62xKLQ3cxU6twtja1mU242LXl8CCrqRbsBziRqx8PpDDX0gPLZ4nrrR252CmiC2JA5XEvmWSiBBVsBHN4f3vzrzf0t28iRTDuSjjaebppYlK0COj1mTVmst0toNaJl7ndSlUsJWwvI7/rTdCEFQQHZxfa/0xAGCEj5f9240TP17Vbf6U3ofk2GjTRvDwqj/JPv89C1iKVXpXXaaTLcpSjehto2JYypNSgGHbkptU11Gjo1tZx0BcqnIK8OiIht6TX/GXO8DaS1anHGB+FxEiti+P8MAADoHzAHoBBGICN4ah4AAx4AhXKQ3hmPEBE78z0kMEJGJCQoxZU1IbIkZO2LOARZxBAsBkIXEUgwUCVhJibWcy0YDtlqg6sBOD/YGhoMZHC3gZAVnG3FxAM0Jri5wc4O7B+hewvADk8eDtfhAPIkXYUlsmXgTH9WXD4MNP70/VwCDA5G5XDw+DwwE4kmWEL6E4sGSKqQhkxdJMAmZLEbo7UsgFZA5YQhHBCIRhegocgxiEfd445GARCQhGSlIBQY50pCOjCi8TGRBgaUAMIZwPrAZlw9Zgbz8XbvDtgnha74X/Wf2mP5394Qe7YjInvQI9YAmEAeHgjQtBcHIfBJO/BIfBh/t+wyfBXyyOx8gAAAHdwOgAS0AHoAVMOSgt/oAplg8PkO0REfWUXWeOpaOo5PoYnXJOrkuQ5erm9Xd1r3+nvdD2a/P9PrAzA49Y+aYeSZb5wVr1vT/6T/yb/mXnJa/yR/ld/IbeVgmdgfs1lH/SQMV291bEyu2kY5PwJ8hH2AaiHpOf0dZG+vcsWP48K1khDPh8WTJI8mYV0EDa4YPL9Y5YxILHkzYgUYoNAgBWe3VYBpQL0IorRFh8M+iAqaENBPhMOPnXXyreYznlRWtTrPispUrJx8GehCJc6XhqTM0pDCcDiSmsnwNFMdJUk4tKKKs5rAViBoISY4hixXaSdszSzEWRVxWJCSpXPkr8wmZRmnO8hScl06ZOnVmkblaN/RsGQBCjlqFWffWNsg2yWXZKo9T93vrDJUeAt9HeU+PWoYmvonoWuxvAuGSarKNoTwlobepY9jWTKMvPTNslZXMX/tEykQP6L7246qwxJmXudgj9xAm8ek4fTJgR0kmWAh9V2kSkFwQG6hzr2grwJ6rtKLXAoIZeuXA7f2V0te26kKGRhvKqJVageU/rM6ZM7uXJB2R7F9is0S9s5lXghxd2zC56yH9mkouO3U+mZ7DrnPt3oK/mdTh3mqXlR2YIlT4VFeVXabqt1MVLbTp6kSoCHwiafZJPZKpUgnOFFoQYjGiEwpPqu5b5p0uyfuGKpVCLlPARKiSydOqH0IVR5NALnaouRI9tFx0TNYl00py/wIpL2NqEiRWkeP1h7AY+BW2JO/a8k5DGJ1wpiM6eg0ipn7Sdl3jYWY6eJUosLCO+lZ6iHj6QAcm1fhEJ9x/oiG3iaiYScVB2nSXYJVOrvY4YusZq35MAJ7YYvQzAdHGlwjfZB3irkHBd3HT2FoQPAoAFLAOKiTOIgwYp7u6NSAHdmhaIZMM+zSFgxYo1879BMEShK+uLCLWxMPtoi7ttRBVZsO7MtWdJwo3FeGlqDFgvFwLDCGC6x4nZwdyIdKLEaFlNcivkUMrywydx5sl6Cxqwfjwe2wicLP0qh6RgqUUscMnBYMgekMKRqRaB7ksFwk/4pPg+wRSbgQjGenbG+ID7+U+bslkegRV8p2mO3EmBqSWOQJVxC+ldZChLBOVcwGmFPo3cElLlUf2vQpBgKCA1+sqkud2kSnBgGBB8DiylZYG7FRNLaQuQ9swTlUzu9j5Shi2iXNtLyd1fcucZOsnPMmHFuuu1R+VGlXwLcdXI/NrQmO8ABSc57HdiMLHDluU1blpLjBZEUk52SJcY9zXMVBbp7Ww+jYO0b7+jpLvGTL6hSXWIwF1y9VloJP62JSfI/Fb0WlL635vUvi9/RDY58gFdjnZIImnyYl1ijOBBB/Lq7yd3KBeX1Beio6pHFOd75bOTsiazHSKa/ntohiScjgqq/NymdGpxxH6eY8r9MseT+iPmXSfk8t4Xo/UfEOKUZr3eJDQWn0cpvkGR0NI3sXOjKtw5PaWld4yVZZmFSX5fSPJN4UV3K7NNy680aXCAX8pPZH9MZBZjSQ5r5UgO7eFZxZ2QMvSQrXtw67Zea2PIQPdWJlFMV5YosKlJwdjdkJuSJzIx3XH0BiunYY3U+LY0x19+FTF5Ha1iLUPPiASAY8F/iMyBawsorwqxP9E5P04zRpr90EUujf0CryMcFeD2JP0AqvsEAe/seZQabhzoXWOlUeiz4WTDtBGWRUGUdAKd/UImpjdlQt3HcQq7R25Y9Sl8ODAZR48/tYU6qeH6IaTB9GT6l2Z6RN45CTJ6L4KhCfv9Aqjc6IqZGRPzaPhCxo67DPLpcmmH2+HJJovwuQq1tEJ96RhRFOJ/AIE3n/lm214P/l6S990XXIawWQuX/SyarhvMxB6Wulc73I3BDLIVAWIdkTNWPGEYbWvH6EpFTd0uDIzMnmLiBuVWbaBb7w6lHpMAC20rff6dvuEFhWXiETnU6gN2dGC564ee94nPdNq5cftkZvb8kvVoRKLdrQYKv29UFzfjkcbhvvfMPTtpAwv+PSc11VtmpOrdTPjLuZ18sTyaRNG1p+Ro6n9V+br2sSm5icwevcT87TnRtNm96mHHB8k3kl9UHpmR4ctp9MqlZsmY+1fMdZnbvWtOgc2PREFxbomD16cHNEPk/pvYmHL/acZjWdV3RVyVIGpCWLKtk74H4STGsjRS37AjvKT2Q/Mwt9e47/a5sbfhyx5sxV413+7dQ/EeJWYACBw9w10z5cciqtMYXA10SC6H4dq2kDkLuFLayGqlZYLqTJZ8mbDpE+pQmRMklBUEqv80FZVaBsZXI3KU1FFVKXiv3lbUvhBBZhgfBDE7ioxHYD/3pv7PgVEeBU/KhecskWk+aT096rgD1wuOk7jjIuBb8kt+4IwSz4DDa8a8zzZztFzJftV9L0FD/Z2sBG34o8P9g74rU9ed5YzWPLp4b69BSVWr7uUCiU4kf+aZZ8RJli5xzRZDyzKtsQ/SaQP/HHGTkxMznNz5+ebRuq0LfPzeaQNmzY0n5rX5j8a6bo2OTHPhdx5bSPwkd8Lq64lH2xP3jbiOTiiGdy/Ddz3sNHtLMS1757+kRuSc3svaGZb+I2xlMZoH9XMa4GXf/I04dcX3567kBETk5MxnN0lXKbui5qTgnQpmTIJAOduAGydAZDdwt+7lF1jYkU/icjFqEw5HZ3xYC9IjBWUTM4dVl17KdR/W2/P1sIya0/9EbZNg0QGzlVeJR+ZJZ+AJ6pvrAfS+Py8av7hsgHg8hcpGqfPa7c9egQcdwV2j2XoZDhlRZm7leFZpgqDLbycXDvxCwuT1iWfq1xTt2w+IcuKCacGo++s4KT1vlPXzTDHJG+DR2zMLMlxas/JKQOZgVRIkL+CZEesNIRKfbfn1PtqQ5v/CI98F9u9233qHSUE+IldaPGapbLjGzcely2tWxkJFhY9EWXlqzsQyAmqTGwRlpcLWxLzfTBvVtDY5A2WmZTL4MjMR284sOLGQrW+3rGx3r6+4dbom+TZ+vjoN0H7I2WYyX1ohI8z035mMk51lVYRjbqjRWvrN9m+ItwQh3z58iP41eYEQ9Hy1LWla11at3+qefrtpz+6mpvGRnThzg32oh2Cd+vzllvKXN2QqorKymezktDLl65eGVi320U+V8wpeUI8u5K3DMKeEwAMngYUf3wyfn2ue2vhBl1es/xCQktLwoXy8rhbWt66yuUwstaLLRstxeznpojp8xFk5PkLgAMQZOtj/zx6lCwXseCIcii0cIrgEecRz1uPY1KsmAJGfRwzjqHeRh0QPmoKxQMVnLDEiDC2Z1/2hKUA9aBQGBz2aoDrxzGURqMpzmHbuk8WEU1qfY6313d6JcVR921fc1jVzVMiTVqjAI9Qk3fVS6RGhjxV9/2+zHAQFKgYMsb9zDMkMulMZnmmT6Z5aVSfDpHgDgXmomT3M6RyJ858UeyWggJBvi1gfcG18w2uEb8McZ11RWg5nNB4wFjoOqsv8gWPCoLzKSJtuTHrv2p1U0PNd4VDMbW1MUOFhXHX1r51FcpBlK/9ywcmNq68ZIcTQZqYkPGobewsR1w4OGymzzFlTF7XcbmlX75i5YHKYdwR0xVHkBxuH9B3LHKh2T1yuNl9cqaZWeTUwCC5CIquEj9x+PxZl9kND3twPvkapDIy/ojFZMgNJ7xbl0mV6iKUkELHMQMDh6qA/hFBfB1h5kHH+cTJrzSrFVUly8m2AXDO7oHUVwmfqlD5wNBISo21XC5x2OJpoC+sVlSMcRHDlaK2dDvqv2GIxhkfGOOxzBbbnpulmuLKEE3RjVlR2jjj2yxJHxlTgFNbmvl2XSn9lhASOj0Sf/hQXHkqv4+vrOA/8Vfy+/tR5YmKfT7/VR9/QeWeoAvoX5NfeUHDHy8EH/NeHtRm8lVr2JUG4pwJ8Tmx4YTiuOLhpkxS20bJfQswkn2OXxN6QtGjqA/kp1MfdkUpKsbQ/FQNLttuPz7PSZNzyqkn1eW4pIB2jN5L7/bUgIGnV9Z+1vnDEZfKUNcSuZs/2uQTQW01SXVuNUJb/hfg/xN0t22xbXD0qL8gdFCG18zPM72HtXQPGwQqujVYFyM9e3pBBa6itzcgMIDBw87Kz/LkgdltWGLSjt3lV4Qrll0W7i5NboYEY0jJ3ofxsGyFxn+LPEIZ4m6VzA5PoGRfXHqRXMkOIye4hUQot8hP+CuAYss4tM73QCz2cnAnkS/Hq5N1LSy8hjO8AuON69Yuy29vyxAUF2UqshTDwzjFypKsrHxFRvKxY7L69PiMhJ3S7946sOUyaqtFrU2g4iA6MIhWYpXplbozE+UlVtL4JHliwDTeiYOD6OBr/pZ+E9/A61h1t5o4IhA2JPg1dLWZTpM0Xeuzl8Z2MfLzC8RO+XFMCD7ekYmPFdUWF9eKYvGZxFni5nSZsfhaUXGxqBYfe7ai+ejNuv39DP38u83GZu+YtMo/Lc2/SipNelp6ld9yqOnpfjJHGOlpVf7UKoNcIolIZBPricXY1vcbInGCyLsTCCc2dgaJmFt8Jpt8PUqCqr9U4nVzXHFxkUTRMc8JpfbifB4T0Duwwj09w1mscGtkJb5ePy5cdnG5/OrVzhKC8lR5kf0qVX9k3lPDSW6zhGZhWZmwOcGykVy3cLUv0rN0C3ogdWvQsl3U77+82h2QVlJaMpoe8LvNXbvsEPfA5SGqVDV/S6lnxNbqH36g7gpIGy0pKUvnRKa7qv85C4JcFM0VCOPORS8kfYSCclD1/iOJpMsavbx54+aPO7SF5tvbCua1OxqHtE3zCFHlD48atdo87afxyb7uyUn4PvUYFp7zHX7XNxkaK361KUX8Z3HMtWv//svlxRbcKbWl9YW34qVgejipbnx6esuWWvi5OjjqMuHk5pTwTD9hjT7HnGw+AZTeY1xE0reZKxM7/Gqy9I0tdWO7Ogi7oigPb2Cvxg7tNMcePYpdRbw+8Upe+cprhcGZ8aMHzfpF4qijtRg2+tHRR3sz8G5vU65swLr1cOwKC4qyJ/xLkKxmawCEHGV7RUZ6sdnh1shObh0sOKxoiz20RO5E48ZSVlNMGnooqHniwHqj9StLaLEYpn/B4JfAP8JayH443uC0zYvLMtJoNDOpZlNfWG6ElHLjgkKQMbY3GIulRTs3qccCV1ZE4fHI2uYRro1dhH8L4o5Z2KevfuMcpVZHOcfSMLtK5RZmAyP3IlmSy/MPS1TymAPRo51suZq/uQhrJCf6eAAX18yX9STmyjvEFRXiDrm8OHG6NXl8M3dFTuQ2k2iaqVSyuki+1TcisVlYWipsTkyUu7SUiyUmt0sUW2kTE7QQ/cq6xZvasHIhtC2Sz5GinEWij8Z4gmqP54qrysNi+uUENX47wN/A7QWE/1kctUEQAABB/R8BlqET+JbxBOTgAKABzkkFhoK0s1iQmFAFZhHCwWCLqAaywduY4ApAsDORsxKKS2MRcEWBSw664lwC4Gxt9kUkKYCzcYHESoFuEIVxG4+KTwSzHdMb96H7an8ut4QzdpvyWNyge8YlB79NkfpooCYFI4XN0klADLaIGGa878uyoQ8WBdTv6kKGEA94QAhEQMASIFFxYD4UYDoe+ECbTgA3SJ9uAPaw0doQ3KANVkMpVELRukACy2GNwGSCJdDWcsiDSvAHH/CjBUKIhwSOYSRAgbq8hwGMc6OhnHAcvgrKYBWsBJqV1aw4Gg+rBenHgQMAAAA=') format('woff2'),
       url('iconfont.woff?t=1630998000941') format('woff'),
       url('iconfont.ttf?t=1630998000941') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.threeBlue {
  font-family: "threeBlue" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="threeBlue"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"threeBlue" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon threeBlue icon-morenmoshi1"></span>
            <div class="name">
              默认模式
            </div>
            <div class="code-name">.icon-morenmoshi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-morenmoshi2"></span>
            <div class="name">
              默认模式1
            </div>
            <div class="code-name">.icon-morenmoshi2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-morenmoshi3"></span>
            <div class="name">
              默认模式
            </div>
            <div class="code-name">.icon-morenmoshi3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-a-Bottontab-ic_beifen70"></span>
            <div class="name">
              ic_默认模式
            </div>
            <div class="code-name">.icon-a-Bottontab-ic_beifen70
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-kuangxuan2"></span>
            <div class="name">
              框选
            </div>
            <div class="code-name">.icon-kuangxuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-kuangxuangongju"></span>
            <div class="name">
              框选工具
            </div>
            <div class="code-name">.icon-kuangxuangongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-xuanzhuan"></span>
            <div class="name">
              旋转
            </div>
            <div class="code-name">.icon-xuanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-raogoujianxuanzhuan"></span>
            <div class="name">
              绕构件旋转
            </div>
            <div class="code-name">.icon-raogoujianxuanzhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-icon-test"></span>
            <div class="name">
              默认模式
            </div>
            <div class="code-name">.icon-icon-test
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon--morenmoshi"></span>
            <div class="name">
              1-默认模式
            </div>
            <div class="code-name">.icon--morenmoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-xuanzhuan1"></span>
            <div class="name">
              KHCFDC_旋转
            </div>
            <div class="code-name">.icon-xuanzhuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-morenmoshi"></span>
            <div class="name">
              默认模式2
            </div>
            <div class="code-name">.icon-morenmoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-kuangxuan1"></span>
            <div class="name">
              框选1
            </div>
            <div class="code-name">.icon-kuangxuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-spin-full"></span>
            <div class="name">
              流转,协作,循环,环形,协同,旋转
            </div>
            <div class="code-name">.icon-spin-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-morenmoshi-13"></span>
            <div class="name">
              默认模式-13
            </div>
            <div class="code-name">.icon-morenmoshi-13
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-kuangxuan"></span>
            <div class="name">
              框选
            </div>
            <div class="code-name">.icon-kuangxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-xuanzhuan2"></span>
            <div class="name">
              旋转
            </div>
            <div class="code-name">.icon-xuanzhuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitudongbeishitu"></span>
            <div class="name">
              shitudongbeishitu
            </div>
            <div class="code-name">.icon-shitudongbeishitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituhoushitu"></span>
            <div class="name">
              shituhoushitu
            </div>
            <div class="code-name">.icon-shituhoushitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitudongnanshitu"></span>
            <div class="name">
              shitudongnanshitu
            </div>
            <div class="code-name">.icon-shitudongnanshitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitufushitu"></span>
            <div class="name">
              shitufushitu
            </div>
            <div class="code-name">.icon-shitufushitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitushiti"></span>
            <div class="name">
              shitushiti
            </div>
            <div class="code-name">.icon-shitushiti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituyangshitu1"></span>
            <div class="name">
              shituyangshitu
            </div>
            <div class="code-name">.icon-shituyangshitu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituxinanshitu"></span>
            <div class="name">
              shituxinanshitu
            </div>
            <div class="code-name">.icon-shituxinanshitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituxibeishitu"></span>
            <div class="name">
              shituxibeishitu
            </div>
            <div class="code-name">.icon-shituxibeishitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituzhushitu"></span>
            <div class="name">
              shituzhushitu
            </div>
            <div class="code-name">.icon-shituzhushitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituzuoshitu"></span>
            <div class="name">
              shituzuoshitu
            </div>
            <div class="code-name">.icon-shituzuoshitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituyoushitu"></span>
            <div class="name">
              shituyoushitu
            </div>
            <div class="code-name">.icon-shituyoushitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-help"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-zhongxin"></span>
            <div class="name">
              中心
            </div>
            <div class="code-name">.icon-zhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituzhengjiao"></span>
            <div class="name">
              【视图】正交
            </div>
            <div class="code-name">.icon-shituzhengjiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitusanweishitu"></span>
            <div class="name">
              【视图】三维视图
            </div>
            <div class="code-name">.icon-shitusanweishitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitushitufangxiang"></span>
            <div class="name">
              【视图】视图方向
            </div>
            <div class="code-name">.icon-shitushitufangxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituzhuizong"></span>
            <div class="name">
              【视图】追踪
            </div>
            <div class="code-name">.icon-shituzhuizong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shitu"></span>
            <div class="name">
              视图
            </div>
            <div class="code-name">.icon-shitu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon threeBlue icon-shituxiankuang"></span>
            <div class="name">
              【视图】线框
            </div>
            <div class="code-name">.icon-shituxiankuang
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="threeBlue icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            threeBlue" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morenmoshi1"></use>
                </svg>
                <div class="name">默认模式</div>
                <div class="code-name">#icon-morenmoshi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morenmoshi2"></use>
                </svg>
                <div class="name">默认模式1</div>
                <div class="code-name">#icon-morenmoshi2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morenmoshi3"></use>
                </svg>
                <div class="name">默认模式</div>
                <div class="code-name">#icon-morenmoshi3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-Bottontab-ic_beifen70"></use>
                </svg>
                <div class="name">ic_默认模式</div>
                <div class="code-name">#icon-a-Bottontab-ic_beifen70</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuangxuan2"></use>
                </svg>
                <div class="name">框选</div>
                <div class="code-name">#icon-kuangxuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuangxuangongju"></use>
                </svg>
                <div class="name">框选工具</div>
                <div class="code-name">#icon-kuangxuangongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan"></use>
                </svg>
                <div class="name">旋转</div>
                <div class="code-name">#icon-xuanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-raogoujianxuanzhuan"></use>
                </svg>
                <div class="name">绕构件旋转</div>
                <div class="code-name">#icon-raogoujianxuanzhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-test"></use>
                </svg>
                <div class="name">默认模式</div>
                <div class="code-name">#icon-icon-test</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--morenmoshi"></use>
                </svg>
                <div class="name">1-默认模式</div>
                <div class="code-name">#icon--morenmoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan1"></use>
                </svg>
                <div class="name">KHCFDC_旋转</div>
                <div class="code-name">#icon-xuanzhuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morenmoshi"></use>
                </svg>
                <div class="name">默认模式2</div>
                <div class="code-name">#icon-morenmoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuangxuan1"></use>
                </svg>
                <div class="name">框选1</div>
                <div class="code-name">#icon-kuangxuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spin-full"></use>
                </svg>
                <div class="name">流转,协作,循环,环形,协同,旋转</div>
                <div class="code-name">#icon-spin-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-morenmoshi-13"></use>
                </svg>
                <div class="name">默认模式-13</div>
                <div class="code-name">#icon-morenmoshi-13</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuangxuan"></use>
                </svg>
                <div class="name">框选</div>
                <div class="code-name">#icon-kuangxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuan2"></use>
                </svg>
                <div class="name">旋转</div>
                <div class="code-name">#icon-xuanzhuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitudongbeishitu"></use>
                </svg>
                <div class="name">shitudongbeishitu</div>
                <div class="code-name">#icon-shitudongbeishitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituhoushitu"></use>
                </svg>
                <div class="name">shituhoushitu</div>
                <div class="code-name">#icon-shituhoushitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitudongnanshitu"></use>
                </svg>
                <div class="name">shitudongnanshitu</div>
                <div class="code-name">#icon-shitudongnanshitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitufushitu"></use>
                </svg>
                <div class="name">shitufushitu</div>
                <div class="code-name">#icon-shitufushitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitushiti"></use>
                </svg>
                <div class="name">shitushiti</div>
                <div class="code-name">#icon-shitushiti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituyangshitu1"></use>
                </svg>
                <div class="name">shituyangshitu</div>
                <div class="code-name">#icon-shituyangshitu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituxinanshitu"></use>
                </svg>
                <div class="name">shituxinanshitu</div>
                <div class="code-name">#icon-shituxinanshitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituxibeishitu"></use>
                </svg>
                <div class="name">shituxibeishitu</div>
                <div class="code-name">#icon-shituxibeishitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituzhushitu"></use>
                </svg>
                <div class="name">shituzhushitu</div>
                <div class="code-name">#icon-shituzhushitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituzuoshitu"></use>
                </svg>
                <div class="name">shituzuoshitu</div>
                <div class="code-name">#icon-shituzuoshitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituyoushitu"></use>
                </svg>
                <div class="name">shituyoushitu</div>
                <div class="code-name">#icon-shituyoushitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-help"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongxin"></use>
                </svg>
                <div class="name">中心</div>
                <div class="code-name">#icon-zhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituzhengjiao"></use>
                </svg>
                <div class="name">【视图】正交</div>
                <div class="code-name">#icon-shituzhengjiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitusanweishitu"></use>
                </svg>
                <div class="name">【视图】三维视图</div>
                <div class="code-name">#icon-shitusanweishitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitushitufangxiang"></use>
                </svg>
                <div class="name">【视图】视图方向</div>
                <div class="code-name">#icon-shitushitufangxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituzhuizong"></use>
                </svg>
                <div class="name">【视图】追踪</div>
                <div class="code-name">#icon-shituzhuizong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shitu"></use>
                </svg>
                <div class="name">视图</div>
                <div class="code-name">#icon-shitu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shituxiankuang"></use>
                </svg>
                <div class="name">【视图】线框</div>
                <div class="code-name">#icon-shituxiankuang</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
